<template>
	<div>
		<el-button type="primary" @click="grant">授权</el-button>
		<el-tree :data="data" show-checkbox default-expand-all node-key="menuId" ref="tree" highlight-current
			:props="defaultProps">
		</el-tree>



	</div>
</template>

<script>
	//
	export default {
		name: 'RoleGrant',
		data() {
			return {
				data: [{
					id: 1,
					label: '系统管理',
					children: [{
						id: 4,
						label: '用户管理'
						// children: [{
						// 	id: 9,
						// 	label: '三级 1-1-1'
						// }, {
						// 	id: 10,
						// 	label: '三级 1-1-2'
						// }]
					},
					
					{
						id: 6,
						label: '角色管理',
						}
					]
				}],
				defaultProps: {
					children: 'children',
					label: 'menuName'
				}
			}
		},
		methods:{
			queryAllMenu(){
				// queryAll
				this.http.get('/api/menu/queryAll',(data)=>{
					console.log(data);
					this.data = data;
					
					//查询完菜单 之后 才能查询已授权，（查 √）
					this.queryGrant();
				})
			},
			queryGrant(){
				let roleId = this.$route.query.roleId
				this.http.get('/api/menu/queryGrant',(menuIds)=>{
					console.log(menuIds);
					this.$refs.tree.setCheckedKeys(menuIds,true);
				},{roleId:roleId})
			},
			grant(){
				//获取当前 的角色id
				let roleId = this.$route.query.roleId
				console.log("roleId",roleId)
				//获取选中的 菜单的id
				let menuId = [];
				let nodes = this.$refs.tree.getCheckedNodes(false,true);
				console.log(nodes);
				nodes.forEach((item,index)=>{
					menuId.push(item.menuId)
				})
				//选中的菜单id
				console.log(menuId);
				
				this.http.post('/api/menu/grant',(success)=>{
					console.log("ret",success);
					if(success){
						this.$message({
						        message: '授权成功',
						        type: 'success'
						      });
					}else{
						this.$message({
						        message: '授权失败',
						        type: 'error'
						      });
					}
				},{
					roleId:roleId,
					menuId:menuId
				})	
			}
		},
		created() {
			// console.log(this.$route.query);
			this.queryAllMenu();
		}
	}
</script>

<style>
</style>
